<template>
  <div class="container">
    <el-input v-model="inputText" class="input"></el-input>
    <div class="text">
      <span>简写</span>
      <span>{{ getNumber() }}</span>
    </div>
    <div class="text">
      <span>大写</span>
      <span>{{ getNumber('2') }}</span>
    </div>
  </div>
</template>
<script setup>
import { computed, ref } from 'vue'
const inputText = ref('')

const getNumber = (type = '1') => {
  const list = inputText.value.split('').reverse() //拆分成数组后反转
  //四个一组
  let allList = [[]]
  list.forEach((ele, index) => {
    if (!allList[Math.floor(index / 4)]) {
      allList[Math.floor(index / 4)] = []
    } //防止二层报错,先指定数组类型
    allList[Math.floor(index / 4)][index % 4] = ele
  })

  const ChineseNameList = type == '1' ? ['', '十', '百', '千', '万'] : ['', '拾', '佰', '仟', '萬']
  //   const NumberList = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
  const NumberList =
    type == '1'
      ? ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
      : ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
  allList = allList.map((item) => {
    return item.map(
      (it, index) => `${NumberList[Number(it)]}${Number(it) == 0 ? '' : ChineseNameList[index]}`
    )
  }) //转换单位

  const nameList = type == '1' ? ['', '万', '亿', '万亿'] : ['', '萬', '億', '萬億']
  console.log(allList, 'allList')

  const str = allList
    .map((item, index) => {
      const sstr = `${item
        .slice()
        .reverse()
        .map((it) => it)
        .join('')
        .replaceAll('零零零', '零')
        .replaceAll('零零', '零')}`
      return sstr == '零' || sstr == ''
        ? ''
        : `${sstr.endsWith('零') ? sstr.slice(0, -1) : sstr}${nameList[index]}`
    })
    .slice()
    .reverse()
    .join('')

  return str
}
</script>

<style lang="scss" scope>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  .input {
    width: 75%;
    height: 80px;
    font-size: 24px;
  }
  .text {
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #359afe;
    font-weight: bold;
    gap: 16px;
  }
}
</style>